---
import { Icon } from '@astrojs/starlight/components';

const { editUrl, entry, locale, isFallback } = Astro.locals.starlightRoute;

const githubEditUrl =
	entry.data.githubURL && (locale === 'en' || isFallback)
		? `${entry.data.githubURL}${entry.data.hasREADME ? 'README.md' : ''}`
		: editUrl;
---

{
	editUrl && (
		<div class="sl-flex">
			<a href={githubEditUrl} class="sl-flex">
				<Icon name="pencil" size="1.2em" />
				{Astro.locals.t('page.editLink')}
			</a>
			<a href="https://contribute.docs.astro.build/guides/i18n/" class="sl-flex">
				<Icon name="translate" size="1.2em" /> {Astro.locals.t('footer.translatePage')}
			</a>
		</div>
	)
}

<style>
	@layer starlight.core {
		div {
			flex-wrap: wrap;
			gap: 0.5rem 1.5rem;
			font-size: var(--sl-text-sm);
		}
		a {
			gap: 0.5rem;
			align-items: center;
			text-decoration: none;
			color: var(--sl-color-gray-3);
		}
		a:hover {
			color: var(--sl-color-white);
		}
	}
</style>
